<template>
	<view class="themeComponent">
		<template  v-for="(item,index) in themeList" :key="item">
			<view class="themeimg" @click="goto">
				<image :src="item" mode="aspectFill"></image>
				<view class="themeTxt">
					<text>图片说明</text>
				</view>
				<view class="themeLeftTop">12天更新</view>
			</view>
		</template>
		<view @click="rediretCategory">
			<view class="themeimg">
				<image src="https://hbimg.huaban.com/29160425161804832c9f15fcb0da2f67d9e9c45528d52-BNmUqm_fw658" mode="aspectFill"></image>
				<view class="moreImage">More</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(["themeList","to"]);//接受父组件传递过来的属性
	const goto=()=>{
		const {to=''} = props;
		if(to==="preview") {
			uni.navigateTo({
				url:"/pages/preview/preview?mode=preview",
			});
		}else{
			uni.navigateTo({
				url:"/pages/categorylist/categorylist?catgoryType=phone",
			});
		}
	}
	
	const rediretCategory=()=>{
		uni.reLaunch({
			url:"/pages/category/category"
		})
	}
	

</script>

<style lang="scss">
	.themeComponent {
		width: 100%;
		height:100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10rpx;
		
		.themeimg {
			position: relative;
			width: 220rpx;
			height: 340rpx;
			background: #f5f5f5;
			//border:1px solid blue;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				
			}

			.themeLeftTop {
				position: absolute;
				left: 0;
				top: 0;
				color: #fff;
				font-size: 24rpx;
				padding: 6rpx 14rpx;
				background: rgba(250, 129, 90, 0.7);
				border-radius: 10rpx 0 20rpx 0;
			}

			.themeTxt {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: white;
				text-align: center;
				vertical-align: middle;
				background: #000;
				opacity: .2;
				backdrop-filter: blur(20rpx);
				border-radius: 0 0 10rpx 10rpx;
			}
			.moreImage {
				position: absolute;
				bottom: 0;
				left: 0;
				right:0;
				top:0;
				background: #000;
				backdrop-filter: blur(20rpx);
				opacity: .5;
				color:#fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}

	}
</style>